﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DragAndDrop.ascx.cs"
    Inherits="Skecthial.UI.Controls.DragAndDrop" %>
<div style="width:800px;height:600px;">
<div id="drag" style="width: 100%;">
    <div>
        <table style="width: 100%;">
            <colgroup>
                <col style="width: 10%;" />
                <col style="width: 10%;" />
                <col style="width: 10%;" />
                <col style="width: 10%;" />
                <col style="width: 10%;" />
                <col style="width: 10%;" />
                <col style="width: 10%;" />
                <col style="width: 10%;" />
                <col style="width: 10%;" />
                <col style="width: 10%;" />
            </colgroup>
            <tbody>
                <tr>
                    <td id="message" class="mark">
                        MSG
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td class="" style="background-color: #ffb497;" colspan="2">
                        <div style="font-size: 8px; color: #FFF; float: right; padding-bottom: 33px;">
                            COUNTRY</div>
                    </td>
                </tr>
                <tr>
                    <td class="single">
                    </td>
                    <td class="single">
                    </td>
                    <td class=" single" style="background-color: #a1c9ae;">
                    </td>
                    <td class=" single" style="background-color: #a1c9ae;">
                    </td>
                    <td class=" single" style="background-color: #a1c9ae;">
                    </td>
                    <td class=" single" style="background-color: #a1c9ae;">
                    </td>
                    <td class=" single" style="background-color: #a1c9ae;">
                    </td>
                    <td class=" single" style="background-color: #a1c9ae;">
                    </td>
                    <td class="single">
                    </td>
                    <td class="single">
                    </td>
                </tr>
                <tr>
                    <td class="single">
                    </td>
                    <td class="single">
                    </td>
                    <td class=" single">
                    </td>
                    <td class="single" style="background-color: #97c8ff;" rowspan="2" colspan="2">
                        <div style="color: #FFF;">
                            PLACE</div>
                    </td>
                    <td class=" single" colspan="2" rowspan="2" style="background-color: #fff397;">
                        <div style="color: #CCC;">
                            EVENT</div>
                    </td>
                    <%-- <td></td>--%>
                    <td class=" single">
                    </td>
                    <td class="single">
                    </td>
                    <td class="single">
                    </td>
                </tr>
                <tr>
                    <td class="single">
                    </td>
                    <td class="single">
                    </td>
                    <td class=" single">
                    </td>
                    <td class=" single">
                    </td>
                    <%--<td></td>
							<td></td>--%>
                    <td class="single">
                    </td>
                    <td class="single">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td class=" single" style="background-color: #a1c9ae;">
                    </td>
                    <td class=" single" style="background-color: #a1c9ae;">
                    </td>
                    <td class=" single" style="background-color: #a1c9ae;">
                    </td>
                    <td class=" single" style="background-color: #a1c9ae;">
                    </td>
                    <td class=" single" style="background-color: #a1c9ae;">
                    </td>
                    <td class=" single" style="background-color: #a1c9ae;">
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td class="trash" colspan="2">
                        TRASH
                    </td>
                    <%--<td class="activity_cell single">
                            </td>--%>
                    <td class=" single">
                    </td>
                    <td class=" single">
                    </td>
                    <td class=" single">
                    </td>
                    <td class=" single">
                    </td>
                    <td colspan="2" class="" style="background: #f7c987;">
                        <div style="float: left; width: 60%;">
                            <br />
                            <input class="inputDate" id="inputDate" value="04/02/2012" style="width: 70px;">
                            <br />
                            <a href="#" onclick="javascript:return dateChange();" class="btnDate">Set Date</a>
                        </div>
                        <div style="float: left; width: 40%;">
                            <table>
                                <tr>
                                    <td style="width: 60px; max-height: 60px;">
                                        <div id="timed">
                                            <div style="vertical-align: bottom; min-width: 100%; max-width: 70px; height: 60px;
                                                text-align: center; font-size: 11px; line-height: 105%;">
                                                <div id="dtDay">
                                                    DD</div>
                                                <br />
                                                <div id="dtMonth" style="font-size: 24px; font-weight: bold; color: #CCC;">
                                                    MM</div>
                                                <br />
                                                <div id="dtYear">
                                                    YYYY</div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                    <td class=" single" colspan="2">
                        <a onclick="runShareAccordion(1);LoadNewPost();" class="btnaddevent">
                            <div style="width: 20%; float: left;">
                                <img src="../assets/images/feather.png" height="24px" style="padding-top: 5px;" /></div>
                            <div id="shareDiv" style="width: 80%; float: right; margin-top: 3px;">
                                Add Event</div>
                        </a>
                    </td>
                    <%--<td>
                            </td>--%>
                </tr>
            </tbody>
        </table>
    </div>
    <div style="width: 100%;">
        <div id="AccordionContainer" class="AccordionContainer">
            <div onclick="runAccordion(1);" class=" AccordionTitle1">
                <div class="AccordionTitle" onselectstart="return false;">
                    Places
                </div>
            </div>
            <div id="Accordion1Content" class="AccordionContent">
                <table width="95%">
                    <tr>
                        <td class=" single">
                            <asp:Repeater ID="rpPlace" runat="server" OnItemDataBound="rp1_dataBound">
                                <HeaderTemplate>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <div style="width: 20%; max-width: 60px; max-height: 60px; position: relative; float: left;
                                        padding: 3px; margin-left: 5px; border: 1px solid #CCC;">
                                        <div id="place" class="drag place clone climit1" obj="PLACE" style="width: 100%;
                                            max-width: 60px; max-height: 60px;">
                                            <div align="center" class="imdiv">
                                                <img src="../Objects/place/<%# Eval("id") %>" style="vertical-align: bottom; width: 100%;
                                                    max-width: 60px; max-height: 60px;" />
                                            </div>
                                        </div>
                                    </div>
                                </ItemTemplate>
                                <FooterTemplate>
                                </FooterTemplate>
                            </asp:Repeater>
                        </td>
                    </tr>
                </table>
            </div>
            <div onclick="runAccordion(2);" class="AccordionTitle2">
                <div class="AccordionTitle" onselectstart="return false;">
                    Activities
                </div>
            </div>
            <div id="Accordion2Content" class="AccordionContent">
                <table width="98%">
                    <tr>
                        <td class=" single">
                            <asp:Repeater ID="rpActivity" runat="server" OnItemDataBound="rp1_dataBound">
                                <HeaderTemplate>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <div style="width: 20%; max-width: 60px; max-height: 60px; position: relative; float: left;
                                        padding: 3px; margin-left: 3px; border: 2px solid #CCC;">
                                        <div id="activity" class="drag activity clone climit1" obj="ACTIVITY" style="width: 100%;
                                            max-width: 60px; max-height: 60px;">
                                            <div align="center" class="imdiv">
                                                <img src="../Objects/activity/<%# Eval("id") %>" style="vertical-align: bottom; width: 100%;
                                                    max-width: 60px; max-height: 60px;" />
                                            </div>
                                        </div>
                                    </div>
                                </ItemTemplate>
                                <FooterTemplate>
                                </FooterTemplate>
                            </asp:Repeater>
                        </td>
                    </tr>
                </table>
            </div>
            <div onclick="runAccordion(3);" class="AccordionTitle3">
                <div class="AccordionTitle" onselectstart="return false;">
                    Event
                </div>
            </div>
            <div id="Accordion3Content" class="AccordionContent">
                <table width="98%">
                    <tr>
                        <td class=" single">
                            <asp:Repeater ID="rpEvent" runat="server" OnItemDataBound="rp1_dataBound">
                                <HeaderTemplate>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <div style="width: 20%; max-width: 60px; max-height: 60px; position: relative; float: left;
                                        padding: 3px; margin-left: 3px; border: 2px solid #CCC;">
                                        <div id="event" class="drag event clone climit1" obj="EVENT" style="width: 100%;
                                            max-width: 60px; max-height: 60px;">
                                            <div align="center" class="imdiv">
                                                <img src="../Objects/event/<%# Eval("id") %>" style="vertical-align: bottom; width: 100%;
                                                    max-width: 60px; max-height: 60px;" />
                                            </div>
                                        </div>
                                    </div>
                                </ItemTemplate>
                                <FooterTemplate>
                                </FooterTemplate>
                            </asp:Repeater>
                        </td>
                    </tr>
                </table>
            </div>
            <div onclick="runAccordion(4);" class="AccordionTitle4">
                <div class="AccordionTitle" onselectstart="return false;">
                    Countries
                </div>
            </div>
            <div id="Accordion4Content" class="AccordionContent">
                <table width="98%">
                    <tr>
                        <td class=" single">
                            <asp:Repeater ID="rpCountry" runat="server" OnItemDataBound="rp1_dataBound">
                                <HeaderTemplate>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <div style="width: 20%; max-width: 60px; max-height: 60px; position: relative; float: left;
                                        padding: 3px; margin-left: 3px; border: 2px solid #CCC;">
                                        <div id="country" class="drag country clone climit1" obj="COUNTRY" style="width: 100%;
                                            max-width: 60px; max-height: 60px;">
                                            <div align="center" class="imdiv">
                                                <img src="../Objects/countries/<%# Eval("id") %>" style="vertical-align: bottom;
                                                    width: 100%; max-width: 60px; max-height: 60px;" />
                                            </div>
                                        </div>
                                    </div>
                                </ItemTemplate>
                                <FooterTemplate>
                                </FooterTemplate>
                            </asp:Repeater>
                        </td>
                    </tr>
                </table>
            </div>
            <div onclick="runAccordion(5);" class="AccordionTitle5">
                <div class="AccordionTitle" onselectstart="return false;">
                    People
                </div>
            </div>
            <div id="Accordion5Content" class="AccordionContent">
                <table width="95%">
                    <tr>
                        <td class=" single">
                            <asp:Repeater ID="rpPeople" runat="server" OnItemDataBound="rp1_dataBound">
                                <HeaderTemplate>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <div style="width: 20%; max-width: 60px; max-height: 60px; position: relative; float: left;
                                        padding: 3px; margin-left: 5px; border: 1px solid #CCC;">
                                        <div id="people" class="drag people clone climit1" obj="PEOPLE" style="width: 100%;
                                            max-width: 60px; max-height: 60px; background-color: transparent;">
                                            <div align="center" class="imdiv" style="background-color: transparent;">
                                                <img src="../Objects/people/<%# Eval("id") %>" style="vertical-align: bottom; width: 100%;
                                                    max-width: 60px; max-height: 60px;" />
                                            </div>
                                        </div>
                                    </div>
                                </ItemTemplate>
                                <FooterTemplate>
                                </FooterTemplate>
                            </asp:Repeater>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
</div>